<template>
    <div>
        <a-button type="primary" @click="add" style="margin-bottom:20px;">添加BDUSS</a-button>
        <standard-table
            rowKey="huifuBduss"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
        >
            <div slot="huifuBduss" slot-scope="{record}">
                <a-input placeholder="请输入主播BDUSS" v-model="record.huifuBduss" @blur="setHuifuBduss" @pressEnter="setHuifuBduss"/>
            </div>
            <div slot="name" slot-scope="{record}">
                <a-input placeholder="请输入主播名称"  v-model="record.zhuboName" @blur="setHuifuBduss" @pressEnter="setHuifuBduss"/>
            </div>
            <div slot="action" slot-scope="{record}">
                <a-popconfirm title="确定选择？" ok-text="选择" cancel-text="取消" @confirm='chooseDanmu(record.huifuBduss,record.zhuboName)'>
                <a href="javascript:;">
                    <a-icon type="copy" />选择账号
                </a>
                </a-popconfirm>
            </div>
        </standard-table>
    </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import { addHuifuBduss,getHuifuBdussList } from '@/api/zhibo/baidu'
export default {
    name:'huifubdussList',
    data() {
        return {
            mod:'add',
            name:'',
            danmu:[],
            huifuDanmu:[],
            addDanmu_loading:false,
            dataSource:[],
            columns:[
                {
                    title: '回复BDUSS',
                    dataIndex: 'huifuBduss',
                    width:600,
                    scopedSlots: { customRender: 'huifuBduss' }
                },
                {
                    title: '用户名',
                    dataIndex: 'name',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title: '操作',
                    width:300,
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    created(){
        this.getHuifuBdussList()
    },
    methods:{
        chooseDanmu(huifuBduss,zhuboName){
            this.$emit('success',{huifuBduss,zhuboName})
        },
        getHuifuBdussList(){
            getHuifuBdussList({}).then((res)=>{
                console.log(res)
                if(res.errcode == 200){
                    this.dataSource = res.data
                }
            })
        },
        setHuifuBduss(){
            console.log(this.dataSource)
            let params = {
                list: this.dataSource
            }
            if(this.dataSource.huifuDanmu != '' && this.dataSource.zhuboName != ''){
                addHuifuBduss(params).then(()=>{
                
                })
            }
        },
        add(){
            this.dataSource.push({
                huifuBduss:'',
                zhuboName:''
            })
        },
        changeDanmuLine(val){
            this.danmu = val
        },
        changeHuifuDanmuLine(val){
            this.huifuDanmu = val
        },
    },
    props:{
        value:Boolean,
        url:String
    },
    watch:{
        mod(e){
            if(e == 'add'){
                this.name = ''
                this.danmu = []
                this.huifuDanmu = []
            }
        },
        value(e){
            if(e){
                this.getHuifuBdussList()
            }
        }
    },
    components:{StandardTable}
}
</script>